import {
  Component,
  ChangeDetectionStrategy,
  OnInit,
  NgZone,
  ChangeDetectorRef,
  ViewChild,
  ElementRef,
} from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd';
import { SFComponent, SFSchema } from '@delon/form';

@Component({
  selector: 'product-lens-test',
  templateUrl: './product-lens.component.html',
  styleUrls: ['./product-lens.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductLensComponent implements OnInit {
  constructor(
    public http: _HttpClient,
    public msg: NzMessageService,
    private ngZone: NgZone,
    private cdr: ChangeDetectorRef,
  ) {}
  data: { [key: string]: any } = {};
  @ViewChild('mycanvas', { static: true })
  private canvas: ElementRef;
  tips = '';
  scale = 4;
  width = 800; // 660;
  height = 600; // 360;
  fmtList = [];

  form: { [key: string]: any } = {
    sph: -3.5,
    cyl: -1,
    axis: 30,
    pd: 31,
    ph: 22,
    type: '',
    refractivity: '1.60',
    baseBend: '4',
    frameA: 57.2,
    frameB: 39.92,
    frameDBL: 18.3,
    pg: '非偏光',
  };
  form1: { [key: string]: any } = {
    sph: 0.0,
    cyl: 0.0,
    axis: 0,
    pd: 20,
    ph: 10,
  };

  submit() {
    this.form.type = this.form.refractivity + this.form.pg;
    this.http.get(`/cf/prod/sys-prod/lens/test`, this.form).subscribe(res => {
      this.data = res.data;
      this.draw();
    });
  }

  ngOnInit() {}

  draw() {
    this.fmtList = [];
    const { canvas, data, scale } = this;
    const c = canvas.nativeElement;
    c.width = c.width;
    c.height = c.height;
    const ctx = c.getContext('2d');
    ctx.translate(this.width / 2, this.height / 2); // 平移原点；
    // 画十字图形
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo((this.width - 30 * 2) / 2, 0);
    ctx.moveTo(0, 0);
    ctx.lineTo((this.width - 30 * 2) / -2, 0);
    ctx.moveTo(0, (this.height - 30 * 2) / -2);
    ctx.lineTo(0, (this.height - 30 * 2) / 2);
    ctx.stroke();
    // 画刻度
    ctx.beginPath();
    for (let i = 0; i < 4; i++) {
      // 左边
      ctx.moveTo(10 * (i + 1) * scale, 0);
      ctx.lineTo(10 * (i + 1) * scale, -5);
      ctx.fillText(10 * (i + 1) + '', 10 * (i + 1) * scale - 5, 10);

      // 右边
      ctx.moveTo(-10 * (i + 1) * scale, 0);
      ctx.lineTo(-10 * (i + 1) * scale, -5);
      ctx.fillText(-10 * (i + 1) + '', -10 * (i + 1) * scale - 10, 10);

      // 上面
      ctx.moveTo(0, -10 * (i + 1) * scale);
      ctx.lineTo(5, -10 * (i + 1) * scale);
      ctx.fillText(10 * (i + 1) + '', -15, -10 * (i + 1) * scale + 5);

      // 下面
      ctx.moveTo(0, 10 * (i + 1) * scale);
      ctx.lineTo(5, 10 * (i + 1) * scale);
      ctx.fillText(-10 * (i + 1) + '', -20, 10 * (i + 1) * scale + 5);
    }
    ctx.stroke();
    ctx.closePath();

    const x1 = data.frameOffsetXList[0];
    const y1 = data.frameOffsetYList[0];
    const firstPoint = this.convert(x1, y1, scale);

    ctx.moveTo(firstPoint[0], firstPoint[1]);
    ctx.beginPath();
    for (let i = 0; i < data.frameOffsetXList.length; i++) {
      const x = data.frameOffsetXList[i];
      const y = data.frameOffsetYList[i];
      const point = this.convert(x, y, scale);
      this.fmtList.push({ x: point[0], y: point[1] });
      ctx.lineWidth = 2;
      ctx.strokeStyle = '#5e9cd3';
      ctx.lineTo(point[0], point[1]);
    }
    ctx.closePath();
    ctx.stroke();

    // 计算最厚及最薄
    let max = data.ticknessList[0];
    let min = data.ticknessList[0];
    let maxi = 0;
    let mini = 0;
    for (let i = 0; i < data.ticknessList.length; i++) {
      if (max < data.ticknessList[i]) {
        max = data.ticknessList[i];
        maxi = i;
      }
      if (min > data.ticknessList[i]) {
        min = data.ticknessList[i];
        mini = i;
      }
    }

    // 最厚画红点
    this.drawCircle(ctx, this.fmtList[maxi].x, this.fmtList[maxi].y, 4, '#fc2e2e');
    // 画备注线
    this.drawRemark(ctx, this.fmtList[maxi].x, this.fmtList[maxi].y, `最厚: ${max.toFixed(2)}mm`);

    // 最薄画绿点
    this.drawCircle(ctx, this.fmtList[mini].x, this.fmtList[mini].y, 4, '#2e98fc');
    // 画备注线
    this.drawRemark(ctx, this.fmtList[mini].x, this.fmtList[mini].y, `最薄: ${min.toFixed(2)}mm`);

    ctx.translate(0, 0); // 平移原点；
  }

  drawCircle(cxt, x, y, r, c) {
    cxt.beginPath();
    cxt.fillStyle = c;
    cxt.arc(x, y, r, 0, Math.PI * 2, true);
    cxt.fill();
    cxt.closePath();
  }

  drawText(ctx, x, y, txt) {
    ctx.beginPath();
    ctx.fillText(txt, x, y);
    ctx.closePath();
    ctx.stroke();
  }

  drawRemark(ctx, x, y, txt) {
    ctx.beginPath();
    if (x < 0 && y < 0) {
      this.drawText(ctx, x - 100, y - 35, txt);
      ctx.moveTo(x - 5, y - 5);
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#d0d0d0';
      ctx.lineTo(x - 30, y - 30);
      ctx.moveTo(x - 30, y - 30);
      ctx.lineTo(x - 100, y - 30);
      ctx.closePath();
    } else if (x < 0 && y > 0) {
      this.drawText(ctx, x - 100, y + 40, txt);
      ctx.moveTo(x - 5, y + 5);
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#d0d0d0';
      ctx.lineTo(x - 30, y + 30);
      ctx.moveTo(x - 30, y + 30);
      ctx.lineTo(x - 100, y + 30);
      ctx.closePath();
    } else if (x > 0 && y < 0) {
      this.drawText(ctx, x + 40, y - 35, txt);
      ctx.moveTo(x + 5, y - 5);
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#d0d0d0';
      ctx.lineTo(x + 30, y - 30);
      ctx.moveTo(x + 30, y - 30);
      ctx.lineTo(x + 100, y - 30);
      ctx.closePath();
    } else if (x > 0 && y > 0) {
      this.drawText(ctx, x + 40, y + 40, txt);
      ctx.moveTo(x + 5, y + 5);
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#d0d0d0';
      ctx.lineTo(x + 30, y + 30);
      ctx.moveTo(x + 30, y + 30);
      ctx.lineTo(x + 100, y + 30);
      ctx.closePath();
    }

    ctx.stroke();
  }

  /**
   * 鼠标在画布上移动
   */
  hover(event) {
    const { canvas, fmtList } = this;
    const c = canvas.nativeElement;
    const t = this.getMousePos(c, event);
    this.tips = `x: ${t.x.toFixed(2)}, y: ${t.y.toFixed(2)}`;
  }

  /**
   * 笛卡尔坐标系转canvas坐标系
   * @param x
   * @param y
   */
  convert(x, y, scale = 1) {
    // 第一象限
    if (x > 0 && y > 0) {
      return [x * scale, -y * scale];
    }
    // 第二象限
    if (x < 0 && y > 0) {
      return [x * scale, -y * scale];
    }
    // 第三象限
    if (x < 0 && y < 0) {
      return [x * scale, Math.abs(y) * scale];
    }
    // 第四象限
    if (x > 0 && y < 0) {
      return [x * scale, Math.abs(y) * scale];
    }
    if (x === 0 && y > 0) {
      return [0, -y * scale];
    }
    if (x === 0 && y < 0) {
      return [0, Math.abs(y) * scale];
    }
    if (y === 0 && x > 0) {
      return [x * scale, 0];
    }
    if (y === 0 && x < 0) {
      return [x * scale, y];
    }
    return [x, y];
  }

  getMousePos(canvas, evt) {
    // ctx.translate(330, 180); // 平移原点；
    const rect = canvas.getBoundingClientRect();

    return {
      x: (evt.clientX - rect.left) * (canvas.width / rect.width) - (this.width / 2 - 1),
      y: (evt.clientY - rect.top) * (canvas.height / rect.height) - (this.height / 2 - 1),
    };
  }
}
